<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>最in红包，多投多得</title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link href="../style.css" rel="stylesheet" type="text/css"/>
    <script src="../../../resource/js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../../resource/js/vue.js" type="text/javascript"></script>
    <script src="../../../resource/js/util.js" type="text/javascript"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../../../resource/js/require.js" type="text/javascript"></script>
    <script src="../../../resource/js/app.js" type="text/javascript"></script>
    <script src="../../../resource/js/common.js" type="text/javascript"></script>
    <link href="../style.css" rel="stylesheet" type="text/css"/>
    <link href="../head.css" rel="stylesheet" type="text/css"/>
    <link href="../footer.css" rel="stylesheet" type="text/css"/>
    <style>
        /*十一月份活动*/
        a {
            outline: none;
        }

        :focus {
            outline: 0;
        }

        .bgcolor {
            background: #ffd030;
        }

        .borRadius5 {
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -o-border-radius: 5px;
        }

        .borRadius49 {
            border-radius: 49px;
            -webkit-border-radius: 49px;
            -moz-border-radius: 49px;
            -o-border-radius: 49px;
        }

        .activityCont {
            margin-bottom: -30px;
            padding-bottom: 100px;
        }

        .activityBanner {
            margin: 0 auto;
            height: 600px;
            background: url(img/act_17_11_1/banner.png) no-repeat center;
        }

        .actCont1 {
            width: 860px;
            margin: -90px auto 0;
        }

        .actCont1 img.titleImg {
            margin: 0 auto;
        }

        .actCont1 p.title {
            font-size: 24px;
            color: #000;
            margin: 20px 0 60px;
        }

        .actCont1 ul li {
            width: 256px;
            height: 303px;
            background: url(img/act_17_11_1/bg.png) no-repeat;
            float: left;
            margin: 0 15px 50px;
        }

        .actCont1 ul li p {
            font-size: 92px;
            font-family: "Garamond";
            color: #ea5c7c;
            font-weight: bold;
            margin-top: 170px;
        }

        .actCont1 ul li p em {
            font-size: 28px;
            color: #ea5c7c;
            font-weight: normal;
        }

        .actCont1 ul li span {
            font-size: 16px;
            color: #ea5c7c;
            margin-top: 20px;
            display: block;
        }

        .actCont2 {
            width: 800px;
            margin: 0 auto;
        }

        .loginCont {
            background: #ffe078;
            padding: 25px 0;
            margin-bottom: 80px;
        }

        .loginCont p {
            font-size: 26px;
            line-height: 44px;
            color: #f94848;
        }

        .actCont2 a {
            width: 350px;
            height: 92px;
            margin: 0 auto 98px;
            font-size: 33px;
            color: #fff;
            line-height: 92px;
            background: #f94848;
            box-shadow: 0 5px 0 0 #e53e3e;
        }

        .actRule {
            width: 1000px;
            margin: 0 auto;
        }

        .actRule img {
            margin: 0 auto 15px;
        }

        .actRule p {
            font-size: 24px;
            color: #000;
            margin-left: 80px;
            line-height: 48px;
        }
    </style>
</head>
<body class="bgcolor">
<div id="app" class="activityCont">
    <div class="activityBanner">
    </div>
    <div class="actCont1">
        <img class="db titleImg" src="img/act_17_11_1/title1.png" alt="">
        <p class="title tc">活动期间，单笔投资满足条件，即可得到相应的“最in红包”奖励。</p>
        <ul class="clearfix">
            <li class="tc">
                <p>10<em>元</em></p>
                <span>投资满5000元可得</span>
            </li>
            <li class="tc">
                <p>20<em>元</em></p>
                <span>投资满1万元可得</span>
            </li>
            <li class="tc">
                <p>68<em>元</em></p>
                <span>投资满3万元可得</span>
            </li>
            <li class="tc">
                <p>118<em>元</em></p>
                <span>投资满5万元可得</span>
            </li>
            <li class="tc">
                <p>248<em>元</em></p>
                <span>投资满10万元可得</span>
            </li>
            <li class="tc">
                <p>498<em>元</em></p>
                <span>投资满20万元可得</span>
            </li>
        </ul>
    </div>
    <div class="actCont2">
        <div v-if="userStatus == 'investUser'">
            <div>
                <div class="loginCont borRadius5 tc">
                    <p>您当前的投资金额为{{latestInvest}}元，已获得{{awardAmt}}元奖励，</p>
                    <p>再接再励，还有更in的红包在等你。</p>
                </div>
                <div class="clearfix">
                    <a v-on:click="toInvest" class="db tc borRadius49 fl toInvest" href="javascript:void(0)">立即投资</a>
                    <a v-on:click="toActivity" class="db tc borRadius49 fr toQuan" href="javascript:void(0)">查看奖励</a>
                </div>
            </div>
        </div>
        <div v-if="userStatus == 'notLogin'">
            <a v-on:click="toLogin" class="db tc borRadius49 toLogin" href="javascript:void(0)">立即登录</a>
        </div>
        <div v-if="userStatus == 'login'">
            <div>
                <div class="loginCont borRadius5 tc">
                    <p>别错过属于您的最in红包。</p>
                </div>
                <a v-on:click="toInvest" class="db tc borRadius49 toInvest" href="javascript:void(0)">立即投资</a>
            </div>
        </div>
    </div>
    <div class="actRule">
        <img class="db" src="img/act_17_11_1/title2.png" alt="">
        <p>1、活动时间：2017年11月1日00:00:00~11月6日23:59:59；</p>
        <p>2、老虎活期、老虎直投10%以下利率项目及转让项目不参与活动；</p>
        <p>3、活动所得【最in红包】，投资完成即刻发放到您的个人账户中，有效期7天；</p>
        <p>4、刷奖、冒用他人身份证、银行卡者一经核实，取消活动资格，所得奖励不予承兑；</p>
        <p>5、本活动最终解释权归两只老虎所有，如有疑问请咨询：400-990-3337 </p>
    </div>
</div>

<script language="javascript">
    var app = new Vue({
        el: '#app',
        data: {
            userStatus: undefined,
            latestInvest: undefined,
            awardAmt: undefined
        },
        methods: {
            toInvest: function () {
                window.location.href = "https://www.twotiger.com/project"
            }, toLogin: function () {
                require(['login'], function (login) {
                    login.init({
                        success: function () {
                            window.location.reload();
                        }
                    });
                })
            }, toActivity: function () {
                window.location.href = "https://www.twotiger.com/activity"
            }, toLogin: function () {
                require(['login'], function (login) {
                    login.init({
                        success: function () {
                            window.location.reload();
                        }
                    });
                })
            }
        }, created: function () {
            //发起ajax请求去更改数据
            axios.post('http://res.test.twotiger.net:1130/api/api/act_17_11_1')
                .then(function (response) {
                    console.log(response);
                    console.log(this);
                    app.userStatus = response.data.userStatus;
                    app.latestInvest = response.data.latestInvest;
                    app.awardAmt = response.data.latestInvest;
                }).then(function (response) {
                console.log(response);
            });
        }
    });
</script>
</body>
</html>